<template>
  <div class="head">
    <el-popover ref="popover1" placement="bottom" width="100" v-model="visible1" trigger="click">
      <div dir="ltr" class="dhx_toolbar_poly_18_dhx_skyblue">
        <table class="buttons_cont" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
          <tbody>
          <tr v-for="(val,i) in pageArray" :key="i"
              class="tr_btn"
              @click="choosePage(val)"
              onmouseover="this.className='tr_btn dhx_toolbar_over'"
              onmouseout="this.className='tr_btn'">
            <td class="td_btn_txt">Page {{val}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-popover>
    <el-popover ref="popover2" placement="bottom" width="160" v-model="visible2" trigger="click">
      <div dir="ltr" class="dhx_toolbar_poly_18_dhx_skyblue">
        <table class="buttons_cont" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
          <tbody>
          <tr v-for="(val,i) in countPerRow" :key="i"
              class="tr_btn"
              @click="choosePageCount(val)"
              onmouseover="this.className='tr_btn dhx_toolbar_over'"
              onmouseout="this.className='tr_btn'">
            <td class="td_btn_txt">{{val}} rows per page</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-popover>
    <div class="float_left">
      <div class="dhx_toolbar_btn"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           @click="btnClick(1)">
        <img src="/static/images/ar_left_abs_dis.gif">
      </div>
      <div class="dhx_toolbar_btn"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           @click="btnClick(2)">
        <img src="/static/images/ar_left_dis.gif">
      </div>
      <div class="dhx_toolbar_text">
        <div class="middle">Records from {{numFrom + 1}} to {{numTo + 1}}</div>
      </div>
      <div class="dhx_toolbar_btn"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           @click="btnClick(3)">
        <img src="/static/images/ar_right_dis.gif">
      </div>
      <div class="dhx_toolbar_btn"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           @click="btnClick(4)">
        <img src="/static/images/ar_right_abs_dis.gif">
      </div>
      <div class="dhx_toolbar_btn def" style="width: 100px;"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           v-popover:popover1 >
          <div class="middle">Page {{currentPage}}◢</div>
      </div>
      <div class="dhx_toolbar_btn def" style="width: 160px;"
           onmouseover="this.className='dhx_toolbar_btn dhx_toolbar_over'"
           onmouseout="this.className='dhx_toolbar_btn'"
           v-popover:popover2 >
          <div class="middle">{{pageCount}} rows per page◢</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bpmCGridpage',
  props: {
    pageMax: {
      type: Number,
      default: 0
    },
    pageStart: {
      type: Number,
      default: 0
    },
    pageCount: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      visible1: false,
      visible2: false,
      countPerRow: [5, 10, 15, 20, 25, 30]
    }
  },
  computed: {
    currentPage () {
      return parseInt(this.pageStart / this.pageCount) + 1
    },
    maxPage () {
      if (this.pageMax <= 0) { return 1 }
      return parseInt((this.pageMax - 1) / this.pageCount) + 1
    },
    pageArray () {
      let array = []
      for (let i = 1; i <= this.maxPage; i++) {
        array.push(i)
      }
      return array
    },
    numFrom () {
      return this.pageStart
    },
    numTo () {
      return this.pageStart + this.pageCount - 1
    }
  },
  methods: {
    choosePageCount (acount) {
      console.log(acount)
      // this.pageCount = acount
      this.visible2 = false
      if (acount + '' === this.pageCount + '') {
        return
      }
      let json = {
        name: 'count',
        value: acount
      }
      this.$emit('gridPageChanged', json)
    },
    choosePage (acount) {
      console.log(acount)
      this.visible1 = false
      if (acount + '' === this.currentPage + '') {
        return
      }
      let json = {
        name: 'start',
        value: (acount - 1) * this.pageCount
      }
      this.$emit('gridPageChanged', json)
    },
    btnClick (aIndex) {
      switch (aIndex) {
        case 1: {
          if (this.currentPage <= 1) {
            break
          }
          let json = {
            name: 'start',
            value: 0
          }
          this.$emit('gridPageChanged', json)
          break
        }
        case 2: {
          if (this.currentPage <= 1) {
            break
          }
          let json = {
            name: 'start',
            value: (this.currentPage - 2) * this.pageCount
          }
          this.$emit('gridPageChanged', json)
          break
        }
        case 3: {
          if (this.currentPage >= this.maxPage) {
            break
          }
          console.log('next pressed......')
          let json = {
            name: 'start',
            value: this.currentPage * this.pageCount
          }
          this.$emit('gridPageChanged', json)
          break
        }
        case 4: {
          if (this.currentPage >= this.maxPage) {
            break
          }
          let json = {
            name: 'start',
            value: (this.maxPage - 1) * this.pageCount
          }
          this.$emit('gridPageChanged', json)
          break
        }
      }
    }
  }
}
</script>

<style scoped>
  .head {
    float: left;
    background-image: url(/static/images/dhxtoolbar_imgs.gif);
    background-position: 0px -0px;
    background-repeat: repeat-x;
    direction: ltr;
    width: 100%;
    display: block;
    height: 27px;
  }

  .dhx_toolbar_btn {
    display: block;
    float: left;
    height: 18px;
    margin: 2px 1px 0px 2px;
    padding: 3px 3px 2px 3px;
    position: relative;
    width: 24px;
  }

  .dhx_toolbar_over {
    background-image: url(/static/images/dhxtoolbar_imgs.gif);
    background-repeat: repeat-x;
    background-position: 0 -54px;
  }

  .dhx_toolbar_text {
    float: left;
    vertical-align: middle;
    font-size: 11px;
    margin-top: 5px;
    margin-right: 1px;
    padding: 0 4px;
    width: 150px;
  }

  .float_left {
    float: left;
  }

  .middle {
    width: 100%;
    text-align: center;
  }

  .dhx_toolbar_poly_18_dhx_skyblue {
    margin: 0;
    padding: 0;
    border: #a4bed4 1px solid;
    background-color: #eaf2fb;
    overflow: hidden;
    cursor: default;
    line-height: normal;
  }
  .tr_btn {
    height: 24px;
  }
  .td_btn_txt {
    width: 100%;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
  }
</style>
